<!--vue模板-->
<template>
    <div>
      <span style="font-size: large">货代询价</span>
      <div class="toolbar" style="margin-top: 20px">
        询价编码：<el-input
          placeholder="请输入"
          clearable
          style="width: 100px; margin-right: 10px"
          v-model="filters.code"
        />
        订单编码：<el-input
          placeholder="请输入"
          clearable
          style="width: 100px; margin-right: 10px"
        />
        状态：<el-select
          clearable
          style="width: 100px; margin-right: 10px"
          v-model="filters.orderCode"
        >
          <el-option
            v-for="statu in allStatus"
            :key="statu.dictValue"
            :value="statu.dictValue"
            :label="statu.dictName"
          />
        </el-select>
        <el-button type="primary" @click="init" style="margin-left: 20px"
          >查询</el-button
        >
        <el-button type="primary" @click="reset">重置</el-button>
      </div>
      <div
        class="toolbar"
        style="float: right; margin-right: 50px; background-color: transparent"
      >
        <el-button type="primary" @click="addOrUpdate()">添加</el-button>
      </div>
      <div style="margin-top: 20px">
        <el-table :data="tableData">
          <el-table-column
            prop="code"
            label="询价编码"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="orderCode"
            label="订单编码"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="enquiryDate"
            label="询价时间"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="status"
            label="状态"
            header-align="center"
            align="center"
            placeholder="全部"
          >
            <template #default="{ row }">
              <span v-if="row.status == 1">待报价</span>
              <span v-else-if="row.status == 2">已报价</span>
              <span v-else-if="row.status == 7">报价中</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" header-align="center">
            <template #default="{ row }">
              <!-- 字典中的状态
                    1待报价----编辑、查看报价、催促报价、更新出运
                    2已报价----详情、查看报价
                    3待审核
                    4待修改
                    5未通过
                    6砍价修改
                    7报价中----编辑、查看报价、催促报价、更新出运
  ==============================================================================================================
                    <!操作对应的跳转
                    编辑（跳转到添加）
                    查看报价（跳转到报价记录，一条 询价 跳过去对应三条 报价 ）
                    催促报价
                    更新出运（跳转到更新出运）
                   -->
              <span v-if="row.status == 1 || row.status == 7">
                <el-button type="primary" link @click="addOrUpdate()"
                  >编辑</el-button
                >
                <el-button type="primary" link @click="toOfferRecords()"
                  >查看报价</el-button
                >
                <el-button type="primary" link @click="promptOffer()"
                  >催促报价</el-button
                >
                <el-button type="primary" link @click="toExport()"
                  >更新出运</el-button
                >
              </span>
              <span v-else-if="row.status == 2">
                <el-button type="primary" link @click="addOrUpdate()"
                  >详情</el-button
                >
                <el-button type="primary" link @click="toOfferRecords()"
                  >查看报价</el-button
                >
              </span>
            </template>
          </el-table-column>
        </el-table>
  
        <!--分页-->
        <div style="height: 60px; line-height: 60px; background-color: #fff">
          <el-pagination
            background
            layout="sizes,total,prev, pager, next,jumper"
            :total="total"
            style="float: right; margin-right: 20px"
            @current-change="chpg"
            @size-change="chsize"
          />
        </div>
      </div>
    </div>
  </template>
  
  <!--vue 组件选项定义-->
  <script setup>
  import { ref, onBeforeMount } from "vue";
  import { queryDict } from "@/api/dict.js";
  import { router } from "@/store/utils";
  //分页参数
  const page = ref(1); //当前页数
  const pageSize = ref(10); //每页记录数
  const total = ref(0); //总记录数
  
  //表格数据
  const tableData = ref([]);
  
  const allStatus = ref([]);
  //模糊查询条件，询价编码,sid暂时固定值，后期通过sessionStorage获取供应商端 登录人员的id
  const filters = ref({
    code: "",
    orderCode: "",
    status: ""
  });
  
  async function init() {
    let data = {
      page: page.value,
      pageSize: pageSize.value,
      code: filters.value.code,
      orderCode: filters.value.orderCode,
      status: filters.value.status
    };
    console.log("发送列表查询请求前的参数", data);
    let res = await querySupplierEnquiry(data);
    if (res.code == 200) {
      tableData.value = res.data.list;
      console.log("异步请求查询结果>>>", res.data);
      page.value = res.data.page;
      pageSize.value = res.data.pageSize;
      total.value = res.data.total;
    }
  }
  
  // 跳转到添加页面
  function addOrUpdate() {
    router.push({
      path: ""
    });
  }
  
  // 查看报价
  function toOfferRecords() {
    router.push({
      path: ""
    });
  }
  
  //催促报价
  function promptOffer() {}
  
  //更新出运
  function toExport() {}
  
  //查询字典表
  async function matchDict(type) {
    let res = await queryDict(type);
    if (res.code == 200) {
      allStatus.value = res.data;
    }
  }
  
  //重置
  function reset() {
    filters.value = {
      code: "",
      status: "",
      sid: "1"
    };
    init();
  }
  
  //改变当前页
  function chpg(pg) {
    page.value = pg;
    init();
  }
  //改变每页记录数
  function chsize(pgsize) {
    pageSize.value = pgsize;
    page.value = 1;
    init();
  }
  
  onBeforeMount(() => {
    init().catch(e => {});
    matchDict("status").catch(e => {});
  });
  </script>
  
  <!--vue样式 scoped当前样式只适用于当前组件-->
  <style scoped>
  .toolbar {
    height: 60px;
    line-height: 60px;
    background-color: #fff;
    padding-left: 20px;
  }
  </style>
  